import path from 'path'
import { defineConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
// import tsx from './plugin/index'
import vueJsx from '@vitejs/plugin-vue-jsx'
/* 
  @vitejs/plugin-vue-jsx 注释掉之后，报react错误
  说明底层是react
*/

/* 
  手写@vitejs/plugin-vue-jsx
  1. 安装插件
    npm install @vue/babel-plugin-jsx
    npm install @babel/core
    npm install @babel/plugin-transform-typescript
    npm install @babel/plugin-syntax-import-meta
    npm install @types/babel__core

  2. 需要用到babel插件，它帮我们将源代码通过编译器parse转换成抽象语法树AST，再通过transform转换成修改后的AST，再经过生成器generator转换成目标代码，再通过loader加载器加载成模块。

  不过最后未实现
*/

// https://github.com/unplugin/unplugin-auto-import
// npm i - D unplugin-auto-import     // 自动导入组件，自动导入vuex，自动导入vue-router ……
import AutoImport from 'unplugin-auto-import/vite'

import Icons from 'unplugin-icons/vite'
import IconsResolver from 'unplugin-icons/resolver'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
// import Inspect from 'vite-plugin-inspect'

// unplugin-vue-define-options插件为每个全局组件添加上名字
import DefineOptions from 'unplugin-vue-define-options/vite'
import { PostCssToViewport } from './plugin/postcss-px-to-viewport'
// UnoCSS引入之后 还需要在main.ts中引入uno.css
import UnoCSS from 'unocss/vite'
import { presetIcons, presetAttributify, presetUno } from "unocss"
// import { de } from 'element-plus/es/locale/index.js'

const pathSrc = path.resolve(__dirname, 'src')

// console.log(loadEnv)
// console.log(process.env)

// https://vitejs.dev/config/
export default ({mode}: any) => {
  // 获取环境变量
  console.log(loadEnv(mode, process.cwd()))

  return defineConfig({
    plugins: [
      vue(),
      // tsx(),
      vueJsx(),
      DefineOptions(),
      UnoCSS({
        presets: [presetIcons(), presetAttributify(), presetUno()],
        rules: [
          ['flex', { display: "flex" }],
          ['red', { color: "red" }],
          [/^m-(\d+)$/, ([, d]) => ({ margin: `${Number(d) * 10}px` })]
        ],
        shortcuts: {
          "cike": ["flex", "red"]
          // "cike": "flex red"
        }
      }),
      AutoImport({
        imports: [
          'vue',
          'vue-router',
          'vue-i18n',
          '@vueuse/core',
          'pinia',
        ],
        // Auto import functions from Element Plus, e.g. ElMessage, ElMessageBox... (with style)
        // 自动导入 Element Plus 相关函数，如：ElMessage, ElMessageBox... (带样式)
        resolvers: [
          ElementPlusResolver(),

          // Auto import icon components
          // 自动导入图标组件
          IconsResolver({
            prefix: 'Icon',
          }),
        ],
        dts: 'types/auto-imports.d.ts', // 使用typescript，需要指定生成对应的d.ts文件或者设置为true,生成默认导入d.ts文件
        dirs: ['src/stores', 'src/composables', 'src/hooks'],
      }),
      Components({
        resolvers: [
          // Auto register icon components
          // 自动注册图标组件
          IconsResolver({
            enabledCollections: ['ep'],
          }),
          // Auto register Element Plus components
          // 自动导入 Element Plus 组件
          ElementPlusResolver(),
        ],

        dts: path.resolve(pathSrc, 'components.d.ts'),
      }),
      Icons({
        autoInstall: true,
      }),
      // Inspect(),
    ],
    resolve: {
      // 设置路径别名
      alias: {
        '@': path.resolve(__dirname, 'src'),
        '*': path.resolve('')
      },
    },
    // 设置全局使用 bem 架构
    css: {
      preprocessorOptions: {
        scss: {
          // additionalData: `@import "/src/bem.scss";`,
          additionalData: `@use "/src/bem.scss" as *;`,
          api: 'modern-compiler'
        },
        less: {
          additionalData: `@import "./src/bem.less";`
        }
      },
      postcss: {
        plugins: [PostCssToViewport()]
      }
    }
  })
}


